"use client"

import { Button } from "@/components/ui/button"
import { ModeToggle } from "@/components/mode-toggle"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Bell, Settings, User as UserIcon, LayoutDashboard, Plus, Database, Leaf, BookOpen, MessageCircle, FolderKanban, LogOut } from "lucide-react"
import { User } from "@/types/auth"
import { useAuth } from "@/hooks/useAuth"

interface HeaderProps {
  activeSection: string
  onSectionChange: (section: string) => void
  user?: User | null
  onLogout?: () => void
}

export function Header({ activeSection, onSectionChange, user: propUser, onLogout: propOnLogout }: HeaderProps) {
  // 使用 useAuth hook 获取认证状态
  const { user: authUser, logout: authLogout } = useAuth()
  
  // 优先使用 hook 中的用户信息，因为它是最新的认证状态
  const currentUser = authUser || propUser
  const handleLogout = propOnLogout || authLogout
  const navigationItems = [
    { id: "dashboard", label: "仪表盘", icon: LayoutDashboard, roles: ['member', 'laboratory'] },
    { id: "project-management", label: "项目管理", icon: FolderKanban, roles: ['member', 'laboratory'] }, // 所有用户都可以访问
    { id: "collection", label: "数据采集", icon: Plus, roles: ['member', 'laboratory'] },
    { id: "management", label: "数据管理", icon: Database, roles: ['member', 'laboratory'] },
    { id: "knowledge", label: "知识库", icon: BookOpen, roles: ['member', 'laboratory'] },
    { id: "ai-chat", label: "AI问答", icon: MessageCircle, roles: ['member', 'laboratory'] },
  ]

  // 根据用户类型过滤导航项，如果没有用户登录则显示所有项
  const filteredNavigationItems = currentUser 
    ? navigationItems.filter(item => item.roles.includes(currentUser.user_type))
    : navigationItems // 未登录时显示所有导航项

  return (
    <div>
      <header className="bg-card border-b border-border px-6 py-4 fixed top-0 left-0 right-0 z-50">
        <div className="flex">
          <div className="flex items-center gap-2">
            <Leaf className="h-8 w-8 text-primary" />
            <div>
              <h2 className="text-xl font-bold text-foreground font-serif">智慧农业</h2>
              <p className="text-xs text-muted-foreground">实验数据管理</p>
            </div>
          </div>

          <div className="flex items-center gap-4 ml-auto">
            {/* 重要功能按钮 - 只在用户登录后显示 */}
            {currentUser && (
              <>
                <Button variant="ghost" size="sm" title="通知">
                  <Bell className="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="sm" title="设置">
                  <Settings className="h-4 w-4" />
                </Button>
              </>
            )}
            
            {/* 用户信息或登录按钮 */}
            {currentUser ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="sm" className="flex items-center gap-2 h-10">
                    <UserIcon className="h-4 w-4" />
                    <span className="hidden md:block text-sm font-medium">
                      {currentUser.full_name || currentUser.username}
                    </span>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-64">
                  <DropdownMenuLabel>用户信息</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <div className="px-2 py-2 text-sm space-y-1">
                    <div className="font-medium text-foreground">
                      {currentUser.full_name || currentUser.username}
                    </div>
                    <div className="text-xs text-muted-foreground">
                      {currentUser.email}
                    </div>
                    <div className="text-xs text-muted-foreground">
                      {currentUser.user_type === 'laboratory' ? '实验室管理员' : '实验室成员'}
                    </div>
                    {currentUser.institution_name && (
                      <div className="text-xs text-muted-foreground">
                        <span className="font-medium">机构:</span> {currentUser.institution_name}
                      </div>
                    )}
                    {currentUser.laboratory_name && (
                      <div className="text-xs text-muted-foreground">
                        <span className="font-medium">实验室:</span> {currentUser.laboratory_name}
                      </div>
                    )}
                    {currentUser.phone && (
                      <div className="text-xs text-muted-foreground">
                        <span className="font-medium">电话:</span> {currentUser.phone}
                      </div>
                    )}
                  </div>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem 
                    onClick={handleLogout} 
                    className="text-red-600 focus:text-red-600 focus:bg-red-50"
                  >
                    <LogOut className="h-4 w-4 mr-2" />
                    退出登录
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
              // 未登录状态显示登录按钮
              <Button variant="outline" size="sm" className="flex items-center gap-2">
                <UserIcon className="h-4 w-4" />
                <span className="hidden md:block">登录</span>
              </Button>
            )}
            
            <ModeToggle />
          </div>
        </div>
      </header>
      
      {/* 左侧垂直导航栏 */}
      <nav className="fixed left-4 top-20 flex flex-col gap-2">
        {filteredNavigationItems.map((item) => {
          const Icon = item.icon
          const isActive = item.id === activeSection
          return (
            <Button
              key={item.id}
              variant={isActive ? "default" : "ghost"}
              size="icon"
              onClick={() => onSectionChange(item.id)}
              className="h-12 w-12"
              title={item.label}
            >
              <Icon className="h-6 w-6" />
              <span className="sr-only">{item.label}</span>
            </Button>
          )
        })}
      </nav>
    </div>
  )
}